<script setup>
import { loginAPI } from '@/services/login'
import { verifyLoginAPI } from '../../services/login'
import { useUserStore } from '@/stores'
import { getCurrentInstance, ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const instance = getCurrentInstance()

/**
 * 登录类型可选项
 */
const loginTypesOption = [
  {
    label: '微信默认登录',
    value: 'defaultLogin',
  },
  {
    label: '微信手机号快捷登录',
    value: 'verifyLogin',
  },
]

/**
 * 当前的登录类型
 */
const loginType = ref('defaultLogin')

/**
 * 验证登录类型
 * @ param {string} type 登录类型
 * @ description 验证登录类型是否在登录类型可选项中，并且是否与当前登录类型匹配
 */
const verifyLoginType = computed(() => {
  return (type) => {
    return loginTypesOption.some((v) => v.value === type) && loginType.value === type
  }
})

// #ifdef MP-WEIXIN
let code = ''
onLoad(async () => {
  const res = await wx.login()
  code = res.code
})

/**
 * 微信默认登录
 */
const onLogin = async () => {
  loginType.value = 'verifyLogin'
  const res = await loginAPI(code)
  if (res.code === 200 && res.message) {
    loginSuccess(res.data)
  } else {
    uni.showModal({
      title: '提示',
      content: res.message + '\n请选择手机号登录',
      showCancel: false,
      success: () => {
        loginType.value = 'verifyLogin'
      },
    })
  }
}

/**
 * 提示勾选隐私协议
 */
const onHint = () => {
  uni.showToast({
    icon: 'none',
    title: '请先阅读并勾选协议',
  })
  // 震动提示
  isAgreePrivacyShakeY.value = true
  setTimeout(() => {
    isAgreePrivacyShakeY.value = false
  }, 500)
}

/**
 * 手机号快捷登录
 */
const onGetphonenumber = async (ev) => {
  const { code: mobileCode } = ev.detail
  const res = await wx.login()
  const { code: sessionCode } = res
  if (!mobileCode || !sessionCode) return
  const resp = await verifyLoginAPI({ mobileCode, sessionCode })
  loginSuccess(resp.data)
}

// #endif

/**
 * 登录成功
 */
const loginSuccess = (data) => {
  const userStore = useUserStore()
  userStore.setUser({ ...data.user, token: data.token })
  uni.showToast({ icon: 'success', title: '登录成功' })
  setTimeout(() => {
    // 页面跳转
    uni.switchTab({ url: '/pages/index/index' })
    uni.hideTabBar()
    instance.proxy.$forceUpdate()
  }, 500)
}

/**
 * 是否同意隐私协议
 */
const isAgreePrivacy = ref(false)
/**
 * 是否开启隐私协议的抖动效果
 */
const isAgreePrivacyShakeY = ref(false)

/**
 * 打开隐私协议
 */
const onOpenPrivacyContract = () => {
  // #ifdef MP-WEIXIN
  // 跳转至隐私协议页面
  wx.openPrivacyContract({})
  // #endif
}
</script>

<template>
  <view class="login">
    <view class="flex justify-center">
      <image src="../../static/logo.png" mode="scaleToFill" />
    </view>
    <!-- #ifdef MP-WEIXIN -->
    <view>
      <!-- 默认登录 -->
      <button v-if="verifyLoginType('defaultLogin')" class="login-button m-h-20" @click="onLogin">
        登录
      </button>
      <!-- 手机号验证登录 -->
      <view v-if="verifyLoginType('verifyLogin')" class="verify-login">
        <!-- 快捷登录按钮遮罩层，用于提示勾选协议 -->
        <view v-if="!isAgreePrivacy" class="button-mask" @click="onHint" />
        <button
          class="login-button m-h-20"
          open-type="getPhoneNumber"
          @getphonenumber="onGetphonenumber"
        >
          手机号快捷登录
        </button>
        <view class="tips" :class="{ animate__shakeY: isAgreePrivacyShakeY }">
          <label class="label" @tap="isAgreePrivacy = !isAgreePrivacy">
            <radio class="radio" color="#28bb9c" :checked="isAgreePrivacy" />
            <text>登录即视为你同意铁塔</text>
          </label>
          <navigator class="link" hover-class="none" url="./protocal"> 《服务条款》 </navigator>
          和
          <text class="link" @tap="onOpenPrivacyContract">《隐私协议》</text>
        </view>
      </view>
    </view>
    <!-- #endif -->
  </view>
</template>

<style scoped lang="scss">
.login {
  image {
    width: 246rpx;
    height: 114rpx;
    margin-top: 200rpx;
  }
  &-button {
    margin-top: 200rpx;
    color: $uni-text-color-inverse;
    background-color: $uni-color-primary;
  }

  .verify-login {
    position: relative;
    .button-mask {
      width: 100%;
      height: 100rpx;
      position: absolute;
      z-index: 1;
    }
    .tips {
      position: absolute;
      bottom: -80rpx;
      left: 20rpx;
      right: 20rpx;
      font-size: 22rpx;
      color: #999;
      text-align: center;

      .radio {
        transform: scale(0.6);
        margin-right: -4rpx;
        margin-top: -4rpx;
        vertical-align: middle;
      }

      .link {
        display: inline;
        color: #28bb9c;
      }
    }

    @keyframes animate__shakeY {
      0% {
        transform: translate(0, 0);
      }
      50% {
        transform: translate(0, -5rpx);
      }
      100% {
        transform: translate(0, 0);
      }
    }

    .animate__shakeY {
      animation: animate__shakeY 0.2s ease-in-out 3;
    }
  }
}
</style>
